/*
 * @Description: canvas学习
 * @Author: ZhangHan
 * @Date: 2025-08-08 15:14:27
 * @LastEditTime: 2025-08-08 16:34:25
 * @LastEditors: ZhangHan
 */
import React, { useEffect, useRef, useState } from "react";
import headerImg from "../../../assets/images/header.jpg";

function CanvasStudy() {
  //绘制矩形
  useEffect(() => {
    drawJuxing();
    drawLine();
    drawArc();
    drawText();
    drawImage();
  }, []);

  //绘制矩形
  const drawJuxing = () => {
    const canvas: any = document.getElementById("myCanvas");
    const ctx = canvas?.getContext("2d"); // 获取2D绘图上下文
    // 填充矩形
    ctx.fillStyle = "red"; // 设置填充颜色
    // // x, y :代表该元素在当前canvas容器中的位置
    // // width, height 代表该元素的宽高
    ctx.fillRect(150, 100, 100, 50); // (x, y, width, height)

    // 描边矩形
    ctx.strokeStyle = "blue"; // 设置描边颜色
    ctx.lineWidth = 3; // 设置线宽
    ctx.strokeRect(150, 30, 100, 50);

    // 填充矩形
    ctx.fillStyle = "yellow"; // 设置填充颜色
    // // x, y :代表该元素在当前canvas容器中的位置
    // // width, height 代表该元素的宽高
    ctx.fillRect(150, 180, 100, 50); // (x, y, width, height)

    //清除当前canvas区域为白色
    ctx.clearRect(150, 200, 20, 20);
  };

  //绘制三角形
  const drawLine = () => {
    const canvas: any = document.getElementById("mypathCanvas");
    const ctx = canvas?.getContext("2d"); // 获取2D绘图上下文
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath(); //新建一条path
    ctx.moveTo(50, 50); //把画笔移动到指定的坐标

    ctx.lineTo(200, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线.
    ctx.lineTo(200, 100); //绘制一条从当前位置到指定坐标(200, 100)的直线.
    //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
    ctx.closePath();
    ctx.stroke(); //绘制路径。

    ctx.beginPath(); //新建一条path
    ctx.moveTo(300, 50); //把画笔移动到指定的坐标

    ctx.lineTo(400, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线.
    ctx.lineTo(400, 100); //绘制一条从当前位置到指定坐标(200, 100)的直线.
    ctx.closePath();
    ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
  };

  //绘制圆弧案例
  const drawArc = () => {
    // arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，
    // 从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。
    /*

    startAngle, endAngle取值参考
    0 弧度 = 3 点钟方向

    π/2 弧度 = 6 点钟方向

    π 弧度 = 9 点钟方向

    3π/2 弧度 = 12 点钟方向

    2π 弧度 = 完整的圆
    */
    const canvas: any = document.getElementById("myArcanvas");
    const ctx = canvas?.getContext("2d"); // 获取2D绘图上下文
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(100, 100, 80, 0, Math.PI / 2, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(300, 150, 80, -Math.PI / 2, Math.PI / 2, false);
    ctx.fillStyle = "red"; // 设置填充颜色
    ctx.fill();
  };

  //渲染文字
  const drawText = () => {
    /*
    
    canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
    */
    const canvas: any = document.getElementById("tutorial");
    if (!canvas.getContext) return;
    const ctx = canvas?.getContext("2d"); // 获取2D绘图上下文
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // ctx.font = "[font-style] [font-weight] [font-size] [font-family]";
    ctx.font = "italic bold 40px 'Microsoft YaHei'"; // 微软雅黑支持斜体
    ctx.fillText("天若有情", 10, 100);
    ctx.strokeText("天若有情", 10, 200);
  };

  //渲染图片
  const drawImage = () => {
    const img = new Image();
    img.onload = function () {
      const canvas: any = document.getElementById("myCanvasImg");
      const ctx = canvas?.getContext("2d");
      ctx.drawImage(img, 50, 50, 200, 200);
    };
    img.onerror = function () {
      console.error("图片加载失败");
    };
    img.src = headerImg; // 正确路径
  };

  return (
    <>
      <div className="flex item-center justify-around flex-wrap">
        <canvas
          id="myCanvas"
          width="500"
          height="300"
          style={{ border: "1px solid black" }}
          className="mb-2"
        ></canvas>
        <canvas
          id="mypathCanvas"
          width="500"
          height="300"
          style={{ border: "1px solid black" }}
          className="mb-2"
        ></canvas>
        <canvas
          id="myArcanvas"
          width="500"
          height="300"
          style={{ border: "1px solid black" }}
          className="mb-2"
        ></canvas>
        <canvas
          id="tutorial"
          width="500"
          height="300"
          style={{ border: "1px solid black" }}
          className="mb-2"
        ></canvas>
        <canvas
          id="myCanvasImg"
          width="500"
          height="300"
          style={{ border: "1px solid black" }}
          className="mb-2"
        ></canvas>
      </div>
    </>
  );
}

export default CanvasStudy;
